<script lang="ts" setup>
import { ref } from 'vue';

import { useVbenForm } from '@vben/common-ui';

import { Button } from 'ant-design-vue';
import consola from 'consola';

import { FormValidatorConfig } from '#/api';
import { getValidateRuleByVben } from '#/api/common/validate';

import { customRules, formSchamas } from './schemas/index';

const [EditForm, formApi] = useVbenForm({
  showDefaultActions: false,
  ...formSchamas,
});
const value = ref<number>();
async function updateRules() {
  const list = await getValidateRuleByVben({
    Api: FormValidatorConfig.Save,
    customRules,
  });
  consola.log(list);
  formApi.updateSchema(list);
}

async function submit() {
  const valid = await formApi.validate();
  const values = await formApi.getValues();
  consola.log(valid);
  consola.log(values);
  consola.log(value.value);
}
</script>

<template>
  <div class="common-form">
    <EditForm />
    <Button @click="updateRules" type="primary">获取规则</Button>
    <Button @click="submit" type="primary">保存</Button>
  </div>
</template>
<style scoped lang="less">
@import '#/assets/styles/common-form.less';
</style>
